import React from 'react';
import { Space, Table, Button, Modal } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { useState } from 'react'
const { Column } = Table;
const { confirm } = Modal

export default function TestTable() {
    const [tableData, setTableData] = useState([])

    const data = [
        {
            key: 1,
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',

        },
        {
            key: 2,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',

        },
        {
            key: 3,
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',

        },
    ];

    function addData() {
        setTableData(data)
    }

    const editTableData = (record) => {
        console.log("tableData", tableData)
        console.log("record", record)
    }

    // 删除
    const deleteTableData = (key) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleFilled />,
            content: 'Some descriptions',
            onOk() {
                console.log(key);
                const newItems = tableData.filter((item, index) => item.key !== key);
                setTableData(newItems);
                console.log("newItems", newItems);
            },
            onCancel() {
                console.log('Cancel');
            },
        });

    }

    return (
        <div>
            <Button onClick={addData} type='primary'>产生数据</Button>
            <Table dataSource={tableData}>
                <Column title='Name' dataIndex='name' key='name' />
                <Column title="Age" dataIndex="age" key="age" />
                <Column title="Address" dataIndex="address" key="address" />

                <Column
                    title="Action"
                    key="action"
                    render={(_, record) => (
                        <Space size="middle">
                            <Button onClick={() => editTableData(record)}>Edit</Button>
                            <Button onClick={() => deleteTableData(record.key)} danger>Delete</Button>
                        </Space>
                    )}
                />
            </Table>
        </div>
    )
}